<template>
  <div class="shopping-view">
    <div class="goods-grid">
      <template v-for="goods in goodslist" :key="goods.id">
	<Goods
	  :id        =        "goods.id"
	  :name      =        "goods.name"
	  :price     =        "goods.price"
	  :stock     =        "goods.stock"
	  :typename  =        "goods.typename"
	  :desc      =        "goods.desc"
	  :tokendown =        "goods.tokendown"
	  :base64    =        "goods.base64"
	/>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
 import { findAllGoods } from '@/service';
 import { onMounted, ref } from 'vue';
 import {Goods} from '@/components/Goods';

 const goodslist = ref<Goods []>([])

 onMounted(async () => {
   let {data} = await findAllGoods({name: undefined, typename: undefined});
   goodslist.value = data

 })
</script>

<style lang="scss" scoped>
 div.goods-grid {
   display: grid;
   grid-template-columns: repeat(3, 33.3%);
 }
</style>